<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="../../lib/themes/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../lib/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../../lib/css/demo.css">
	<script type="text/javascript" src="../../lib/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../lib/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../lib/js/jquery.serializeObject.js"></script>
    <script type="text/javascript" src="../../lib/js/jquery.parseurl.min.js"></script>
</head>
<style>
</style>

<body>
	<table id="dg"></table>
	<div id="dlg" class="easyui-dialog" title="form 表单" data-options="iconCls:'icon-save',closed:true" style="width:300px;height:400px;padding:10px">
		<!-- closed依赖上一层window -->
		<form id="ff" class="easyui-form" data-options="novalidate:true">
			<table cellpadding="5">
				<tr>
					<td>Content:</td>
					<td>
						<input class="easyui-textbox" type="text" name="content" data-options="required:true"></input>
					</td>
				</tr>
				<tr>
					<td>Appraiser:</td>
					<td>
						<input class="easyui-textbox" type="text" id="appraiser" name="appraiser" data-options="required:true"></input>
					</td>
				</tr>
				<tr>
						<td>Self_id:</td>
						<td>
							<input class="easyui-textbox" readonly=”readonly” type="text" name="_id"></input>
						</td>
					</tr>
				<tr>
					<td>BelongId:</td>
					<td>
						<input  readonly=”readonly” id="belongId" type="text" name="belongId"></input>
					</td>
				</tr>
			</table>
		</form>
		<div style="text-align:center;padding:5px">
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">Submit</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">Clear</a>
		</div>
	</div>
	<div id="tb" style="padding:2px 5px;">
		<a href="javascript:void(0)" onclick="add()" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
		<a href="javascript:void(0)" onclick="remove()" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>

		keywords:
		<input class="easyui-textbox" id="keywords" name="keywords" style="width:110px">

		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="searchData()" iconCls="icon-search">Search</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="reload()" iconCls="icon-reload">刷新</a>
	</div>
</body>

</html>

<script>
	var newsId=$.parseUrl(window.location.href).query.id;
	//初始化表单
	$('#dg').datagrid({
		toolbar: '#tb',
		pagination: true,
		fit: true,
		url: 'http://localhost:3000/comment/list',
		columns: [[
			{ field: 'ck', checkbox: true },
			{ field: 'belongId', title: '归属Id', width: 100 },
			{ field: 'content', title: '评论内容', width: 100 },
			{ field: 'appraiser', title: '评论者', width: 100 },
			{
				field: 'operate', title: '操作', width: 100,
				//
				formatter: function (value, row, index) {
					return "<a href='javascript:void(0)' onclick='updata(" + index + ")'>Edit</a> <a href='javascript:void(0)' onclick='removeSelf(this," + index + ")'>delete</a>"
				}
			}
		]],
		queryParams:{
		    	belongId:newsId
		    },
		onDblClickRow(index, row) {
			editData(row);
		}
	});
	//添加操作
	function add() {
		$('#ff').form('clear');
		$('#belongId').val(newsId);
		$('#dlg').dialog('open')
	}
	//加载表单
	function editData(row) {
		$('#dlg').dialog('open');
		$('#ff').form('load', row);
		$('#appraiser').attr('readonly','readonly');
	}
	//更新操作
	function updata(index) {
		var rows = $("#dg").datagrid('getRows');
		var row = rows[index];
		editData(row);
	}
	//搜索操作
	function searchData() {
		var val = $('#keywords').val()
		$('#dg').datagrid('load', {
			content: val,
			belongId: newsId,
			address: 'ho'
		});
		$('#dg').datagrid('reload');
	}
	//刷新页面
	function reload() {
		$('#dg').datagrid('load', {
			belongId: newsId,
			address: 'ho'
		});
		$('#dg').datagrid('reload');
	}
	//删除单个
	function removeSelf(me,index) {
		var flag = $(me).parents('tr').find('input[type=checkbox]').prop('checked');
		if (flag) {
			if (confirm('你确定要删除么？')) {
				var rows = $("#dg").datagrid('getRows');
				var row = rows[index];	
				var id = row._id;
				$.ajax({
					url: 'http://localhost:3000/comment/data/' + id,
					type: 'delete',
				}).done(function (res) {
					$.ajax({
								url: 'http://localhost:3000/news/data/'+newsId,
								type:'get'	
							}).done(function(res){
								
								res.count=parseInt(res.count)-1;
								$.ajax({
									url: 'http://localhost:3000/news/data/' + newsId,
									type: 'put',
									data: res,
								})	
							
							})
					$.messager.show({
						title: '信息提示',
						msg: '删除数据成功',
						showType: 'show'
					});
					$("#dg").datagrid("reload");
				})
			}
		} else {
			$.messager.show({
				title: '信息提示',
				msg: 'check 未勾选',
				showType: 'show'
			});
		}
	}
	//删除多个
	function remove() {
		if (confirm('你确定要删除么？')) {
			var delCheck = $('#dg').datagrid('getChecked');
			var ids = [];
			var length = delCheck.length;
			for (var i = 0; i < length; i++) {
				ids.push(delCheck[i]._id);
			}
			$.ajax({
				url: 'http://localhost:3000/comment/deletes',
				type: 'post',
				data: { ids: ids.toString() }
			}).done(function (res) {
				if (res.status === 200) {
					$.ajax({
								url: 'http://localhost:3000/news/data/'+newsId,
								type:'get'	
							}).done(function(res){
								
								res.count=parseInt(res.count)-length;
								$.ajax({
									url: 'http://localhost:3000/news/data/' + newsId,
									type: 'put',
									data: res,
								})	
							
							})
					$.messager.show({
						title: '信息提示',
						msg: '删除数据成功',
						showType: 'show'
					});
				} else {
					
					$.messager.show({
						title: '信息提示',
						msg: '请选择要删除的数据',
						showType: 'show'
					});
				}
				$("#dg").datagrid("reload");
			})
		}
	}
	//双击表单 修改
	function submitForm() {
		$('#ff').form('submit', {
			onSubmit: function () {
				if ($(this).form('enableValidation').form('validate')) {
					//将表单数据序列化成对象
					var data = $('#ff').serializeObject();
					if (data._id && data._id.trim().length > 0) {
						$.ajax({
							url: 'http://localhost:3000/comment/data/' + data._id,
							type: 'put',
							data: data,
						}).done(function (res) {
						
							$('#dlg').dialog('close');
							$('#dg').datagrid('reload');//在向服务器改变数据之后，更新前台数据
						})

					} else {
						delete data._id;
						$.ajax({
							url: 'http://localhost:3000/comment/data',
							type: 'post',
							data: data
						}).done(function (res) {
							$.ajax({
								url: 'http://localhost:3000/news/data/'+newsId,
								type:'get'	
							}).done(function(res){
								
								res.count=parseInt(res.count)+1;
								$.ajax({
									url: 'http://localhost:3000/news/data/' + newsId,
									type: 'put',
									data: res,
								})	
							
							})
							$('#dlg').dialog('close');
							$('#dg').datagrid('reload');//在向服务器改变数据之后，更新前台数据
						})
					}
				} else {
					$.messager.show({
						title: '信息提示',
						msg: '表单验证失败',
						showType: 'show'
					})
				}
			}
		});
	}
	function clearForm() {
		$('#ff').form('clear');
	}

</script>